<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.snow-container {
				position: absolute;
				height: 800px;
				width: 100%;
				max-width: 100%;
				top: 0;
				overflow: hidden;
				z-index: 2;
				pointer-events: none;
				background-color: #000;
			}

			.snow {
				display: block;
				position: absolute;
				z-index: 2;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				pointer-events: none;
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
				-webkit-animation: snow linear infinite;
				animation: snow linear infinite;
			}

			.snow.foreground {
				background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
				-webkit-animation-duration: 15s;
				animation-duration: 15s;
			}

			.snow.foreground.layered {
				-webkit-animation-delay: 7.5s;
				animation-delay: 7.5s;
			}

			.snow.middleground {
				background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
				-webkit-animation-duration: 20s;
				animation-duration: 20s;
			}

			.snow.middleground.layered {
				-webkit-animation-delay: 10s;
				animation-delay: 10s;
			}

			.snow.background {
				background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
				-webkit-animation-duration: 30s;
				animation-duration: 30s;
			}

			.snow.background.layered {
				-webkit-animation-delay: 15s;
				animation-delay: 15s;
			}

			@-webkit-keyframes snow {
				0% {
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}

				100% {
					-webkit-transform: translate3d(15%, 100%, 0);
					transform: translate3d(15%, 100%, 0);
				}
			}

			@keyframes snow {
				0% {
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}

				100% {
					-webkit-transform: translate3d(15%, 100%, 0);
					transform: translate3d(15%, 100%, 0);
				}
			}
		</style>
	</head>
	<body>
		<div class="snow-container">
			<div class="snow foreground"></div>
			<!-- <div class="snow foreground layered"></div>
			<div class="snow middleground"></div>
			<div class="snow middleground layered"></div>
			<div class="snow background"></div>
			<div class="snow background layered"></div> -->
		</div>
	</body>
</html>
